<template>
	<scroll-view style="padding:4px 16px">
		<view class="notice-title">
			<span>
				{{detailData.name}}
			</span>
			<span v-if="detailData.isImport===1" style="float: right;">
				<u-tag text="重要" type="error" plain plainFill></u-tag></span>
		</view>
		<view class="notice-creator">
			<uni-row>
				<uni-col :span="12">{{detailData.creator}}</uni-col>
				<uni-col :span="12">{{detailData.createTime}}</uni-col>
			</uni-row>
		</view>
		<view class="notice-content">
			<rich-text :nodes="detailData.content"></rich-text>
		</view>
	</scroll-view>
</template>

<script>
	import * as NoticeApi from "@/api/notice.js"
	import {
		formatDate,
		formatRichText
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				detailData: {}
			};
		},
		onLoad(options) {
			const {
				id
			} = options;
			console.log('options', options);
			NoticeApi.getNoticeDetail(id).then(res => {
				this.detailData = {
					...res.data,
					content: formatRichText(res.data.content),
					createTime: formatDate(res.data.createTime),
				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}
	.notice-title {
		// text-align: left;
		margin: 40rpx 20rpx;
		font-size: 38rpx;
		font-weight: 600;
		line-height: 54rpx;
	}
	.notice-content {
		text-indent: 2em;
		font-size: 15px;
	}
	.notice-creator {
		margin: 40rpx 20rpx;
		font-size: 15px;
		color: darkgray
	}
	.rich-text {
		width: 100%;
	}
	.uni-row { 
		display: flex !important;
		justify-content: space-between !important;
	}
</style>